class Vue {
  constructor(options) {
    this.$data = options.data;
    // 初始化实例调用数据监听函数Observer
    Observer(this.$data);
    // HTML模板解析
    Compile(options.el, this);
  }
}

// 数据劫持 - 监听实例里的数据
function Observer(data_instance) {
  const dep = new Dependency();
  // 递归出口  如果没有子属性或者没有对象就终止
  if (!data_instance || typeof data_instance !== 'object') return;
  // 遍历$data中key ---- Object.keys(data_instance)得到[name, age, info]
  // forEach对数组遍历，对每一个属性进行数据监听
  Object.keys(data_instance).forEach((key) => {
    // 只有当属性值被修改时才会触发Object.defineProperty，故需要将值存到value中
    let value = data_instance[key];
    Observer(value); // 递归，子属性数据劫持
    // 参数1：操作对象    参数2： 操作属性   参数3： 描述对象
    Object.defineProperty(data_instance, key, {
      enumerable: true, // 表示属性可以枚举
      configurable: true, // 表示属性描述符可以被改变
      // 读取data中的依赖值，当访问data中的属性时会触发get函数
      get() {
        console.log(`访问${key}的值为-----${value}`);
        // 被读取了，这个依赖要收集起来
        Dependency.temp && dep.addSub(Dependency.temp);
        return value;
      },
      // 当data中的属性值被修改时会触发set函数
      set(newValue) {
        console.log(`设置${key}的值为-----${newValue}`);
        value = newValue;
        Observer(newValue); // 递归， 子属性数据拦截修改

        // 数据被改变了，通知依赖去更更新
        dep.notify();
      },
    });
  });
}

// HTML模板解析----替换DOM
function Compile(element, vm) {
  // 向vm实例添加$el
  vm.$el = document.querySelector(element);
  // 创建文档碎片
  const fragment = document.createDocumentFragment();
  let child;
  // 循环将每一个节点添加到文档碎片中
  while ((child = vm.$el.firstChild)) {
    fragment.append(child);
  }

  // 文档碎片插值解析
  fragment_compile(fragment);
  vm.$el.appendChild(fragment);

  // 替换文档碎片内容
  function fragment_compile(node) {
    // 正则：用来匹配插值{{}}
    const pattern = /\{\{\s*(\S+)\s*\}\}/;
    if (node.nodeType === 3) {
      const xxx = node.nodeValue;
      const result_regex = pattern.exec(node.nodeValue);
      if (result_regex) {
        const arr = result_regex[1].split('.');
        const value = arr.reduce((total, current) => total[current], vm.$data);
        node.nodeValue = xxx.replace(pattern, value);

        // 创建订阅者
        new Watcher(vm, result_regex[1], (newValue) => {
          node.nodeValue = xxx.replace(pattern, newValue);
        });
      }
      return;
    }

    // 判断input上的v-model
    if (node.nodeType === 1 && node.nodeName == 'INPUT') {
      const attr = Array.from(node.attributes);
      attr.forEach((i) => {
        if (i.nodeName === 'v-model') {
          const value = i.nodeValue
            .split('.')
            .reduce((total, current) => total[current], vm.$data);
          node.value = value;

          // 在编译HTML中，会为每个与数据绑定相关的节点生成一个订阅者watcher，watcher会将自己添加到相应属性的dep中。
          new Watcher(vm, i.nodeValue, (newValue) => {
            node.nodeValue = newValue;
          });

          node.addEventListener('input', (e) => {
            const arr1 = i.nodeName.split('.');
            const arr2 = arr1.slice(0, arr1.length - 1);
            const final = arr2.reduce(
              (total, current) => total[current],
              vm.$data
            );
            final[arr1[arr1.length - 1]] = e.target.value;
          });
        }
      });
    }
    node.childNodes.forEach((child) => fragment_compile(child));
  }
}

// 发布者----博主
class Dependency {
  constructor() {
    this.subscribers = [];
  }
  // 添加订阅者--收集依赖
  addSub(sub) {
    this.subscribers.push(sub);
  }
  // 通知订阅者Watcher中的update去更新
  notify() {
    this.subscribers.forEach((sub) => sub.update());
  }
}

// 订阅者----粉丝订阅博主信息
class Watcher {
  constructor(vm, key, callback) {
    this.vm = vm;
    this.key = key;
    this.callback = callback;
    // 临时属性 - 触发getter
    Dependency.temp = this;
    key.split('.').reduce((total, current) => total[current], vm.$data);
    Dependency.temp = null;
  }

  // 数据发生改变，来更新视图
  update() {
    const value = this.key
      .split('.')
      .reduce((total, current) => total[current], this.vm.$data);
    this.callback(value);
  }
}
